import React from 'react';
import {withRouter} from 'react-router-dom';
import {observer} from 'mobx-react';
import CKRichEditor from './CKRichEditor';
import { Reply } from 'weaver-mobile-page';
import Store from './RichTextStore';
const NoMask = Reply.NoMask;

@withRouter
@observer
export default class RichText extends React.Component {
  static Store = Store;
  render() {
    const {store, replyProps} = this.props, {richEditorStore,replyStore} = store;
    const leftConfig = [
      { type: 'voice' },
      { type: 'blog-biaoqing' },
      { type: 'blog-tupian', model: 2 },
      // { type: '@' },
      { type: 'tianjia' },
    ];
  
    return (
      <div className="wea-doc-rich-text">
        <div className="wea-doc-rich-text-editor">
          <div className="wea-doc-rich-text-editor-content">
            <CKRichEditor store={richEditorStore}/>
          </div>
        </div>
        <NoMask
          ref={ref => store.setReplyRef(ref)}
          store={replyStore}
          showInput={false}
          leftConfig={leftConfig}
          onEmojiChange={store.onEmojiChange}
          onImgChange={store.onImgChange}
          onAtChange={store.onAtChange}
          onBrowserChange={store.onBrowserChange}
          onUploadChange={store.onUploadChange}
          onSpeechChange={store.onSpeechChange}
          {...replyProps}
        />
      </div>
    );
  }
}